<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="100">
            <template slot-scope="scope">
                {{ scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="身份" width="180">
            <template slot-scope="scope">
                {{ scope.row.major }}
            </template>
        </el-table-column>
        <el-table-column label="更新日期" width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.time | filter('') }}</span>
            </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.status === 1 ? 'success' : 'warning'"
                        disable-transitions>{{scope.row.status === 1 ? '已启用' : '禁用'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                tableData: []
            }
        },
        filters: {
            filter(val, str) {
                let pattern = /T.*?Z/;
                return val.replace(new RegExp(pattern), str)
            }
        },
        methods: {
            handleEdit(id) {
                this.$router.push('/users/update/' + id)
            },
            handleDelete(id) {
                this.$http.delete('/api/users/' + id)
                .then(({data}) => {
                    if (data.code == 200) {
                        this.tableData = this.tableData.filter(item => item.id != id);
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'warning'
                        })
                    }
                })
            }
        },
        mounted() {
            this.$http.get('/api/users')
            .then(({data}) => {
                this.tableData = data.data
            })
        }
    }
</script>

<style scoped>

</style>